<template>
	<view class="content">
    <view class="rescue-logo">
      <image src="../../static/images/rescue-logo.png"></image>
    </view>
   <view class="sub-nav">
   	<button class="btn"
    open-type="getPhoneNumber"
    shape="circle"            
    @getphonenumber="getPhoneNumber"
    >社区求助</button>
   </view>
    <!-- 社区求助 -->
    <!-- <view class="forHelp-box">
      <view class="forHelp-box-detail">
        <view class="detail-text" @click.native="getMyLocation()">社区求助</view>
      </view>
    </view> -->
    
    <!-- 呼叫支援 -->
    <view class="clll-admin-box" @click.native="callSupport(servicePhone)">
      <!-- 图标 -->
      <view class="urgent-call-icon">
        <image src="../../static/images/phone.png"></image>
        <view class="text-datail">呼叫支援</view>
      </view>
      <!-- 文字 -->
      <view class="urgent-call-text" @click.native="goMap()">
        <image src="../../static/images/map.png"></image>
        <view class="text-datail">迷路返航</view>
        </view>
    </view>
    
    <view class="phone-list">
      <view class="phone-item-120">
        <view><image src="../../static/images/car.png"></image></view>
        <view class="call-phone"><view  @click.native="callSupport(120)">呼叫120</view></view>
      </view>
      <view class="phone-item-110">
        <view><image src="../../static/images/shield.png"></image></view>
        <view class="call-phone"><view  @click.native="callSupport(110)">呼叫110</view></view>
      </view>
      <view class="phone-item-119">
        <view><image src="../../static/images/oil.png"></image></view>
        <view class="call-phone"><view @click.native="callSupport(119)">呼叫119</view></view>
      </view>
    </view>
	</view>
</template>

<script>
  import WXBizDataCrypt from "../../data/WXBizDataCrypt.js";  
	export default {
		data() {
			return {
        //求救人员电话
        forHelpPhone:'',
        // appid:'wx91a4064af19e4310',
        // session_key:'fEsunoJ4ier3BMKGXgNw2Q==',
        appid:'',
        session_key:'',
        script:'',
        // 紧急电话列表
        phoneList:[
            {
              "phone": "120",
              "name": "紧急救援1"
            },
            {
              "phone": "119",
              "name": "火警电话"
            },
            {
              "phone": "122",
              "name": "交警电话"
            }
        ],
        // 地图
        latitude:'29.58832234563708',
        longitude:'106.56436432812498',
        covers: [
        ],  //标记点用于在地图上显示标记的位置
        controls: [{ //在地图上显示控件，控件不随着地图移动
        	id: 1, //控件id
        	iconPath: '../../static/images/location.png', //显示的图标    
        	position: { //控件在地图的位置
        		left: 15,
        		top: 15,
        		width: 50,
        		height: 50
        	},
        }],
        scale: 16, //地图缩放比例
        servicePhone:13541770202,
				bgImageSrc:`${this.$baseUrl}/image/download?name=position.png`,
        scale:8,
        // 求救的具体定位
        position:{
          // 定位的具体名称
          name:'成都工业学院',
          // 详细位置
          address:'四川省成都市郫都区中心大道二段一号',
          latitude:'30.792238',
          longitude:'103.885445',
        }
			}
		},
    onShow() {
      // console.log("111")
      },
    onLoad() {
      // this.getuserNew(); 
      this.getHomeLocation()
      this.getPhoneList()
      this.loginForPhone()
    },
		methods: {
      // 获取小区地址导航回家
      getPhoneList(){
        this.$request({
          url: `${this.$baseUrl}/users/phoneList`,
          method:'GET',
        }).then(res=>{
          // console.log(res.data)
          this.phoneList= res.data.data
        })
      },
      getHomeLocation(){
        this.$request({
          url: `${this.$baseUrl}/users/homeLocation`,
          method:'GET',
        }).then(res=>{
          // console.log(res.data.data)
          this.position = res.data.data
        })
      },
      goMap(){
        // console.log("进入地图")
        uni.openLocation({
          latitude:this.position.latitude,
          longitude: this.position.longitude,//经度
          name: this.position.name,
          address: this.position.address
        })
      },
      //寻求帮助
      async forHelp(){
        // console.log(this.position)
        this.$request({
          url: `${this.$baseUrl}/users/forHelp`,
          data:{
            phone:this.forHelpPhone,
            position:this.position
          },
          method:'POST'
        }).then(res=>{
          // console.log(res)
          if(res.data.status){
            uni.showToast({
              title: '管理员已收到，请原地等待支援',
              icon:'none'
            })
          }
          else{
            uni.showToast({
              title: res.data.msg,
              icon:'none'
            })
          }
        })
      },
      loginForPhone(){
        uni.login({
        	provider: 'weixin',
        	success: (res) =>
        		{
        			let params = {
        				url: `${this.$baseUrl}/weixin/login?code=${res.code}`,
        			};
        			this.$request(params).then(res => {
        				// uni.setStorageSync("user", res.data.data)
                // console.log(res.data.appid)
                // console.log(res.data)
                this.appid = res.data.data.appid
                this.session_key = res.data.data.session_key
                // console.log(this.appid)
                // console.log(this.session_key)
        			}).catch(res => {
        				console.log(res)
        			})
        		}
        })
      },
      // 获取用户手机号
      getPhoneNumber(e){	
      		console.log(e.detail.errMsg)      // 判断用户是否允许获取手机号
      		console.log(e.detail.iv)           // 参数 iv
      		console.log(e.detail.encryptedData) // 参数encryptedData
          console.log(this.appid)
          console.log(this.session_key)
      		if(e.detail.errMsg == "getPhoneNumber:ok"){// 用户允许或去手机号
          // let pc = new WXBizDataCrypt("wx91a4064af19e4310","fEsunoJ4ier3BMKGXgNw2Q==");
              let pc = new WXBizDataCrypt(this.appid,this.session_key);
      				let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);
      				console.log('解密后 data: ', data)
              this.forHelpPhone = data.phoneNumber
              this.getMyLocation()
              // this.forHelp()
      		}else{
            uni.showToast({
              title: '已取消授权',
              icon:'none'
            })
          }
      	},
      
      async getMyLocation(){
        // console.log("获取定位了")
        uni.chooseLocation({
        	success: function (res) {
            this.position=res
        		console.log('位置名称：' + res.name);
        		console.log('详细地址：' + res.address);
        		console.log('纬度：' + res.latitude);
        		console.log('经度：' + res.longitude);
            this.latitude=res.latitude
            this.longitude=res.longitude
            this.covers = [{
            	latitude: res.latitude,
            	longitude: res.longitude, 
            	iconPath: '../../static/images/location.png', //地图上的图标
            	width: 25, //宽
            	height: 25, //高
            	callout: { //自定义标记点上方的气泡窗口 点击有效  
            		content: res.address, //文本
            		color: '#ffffff', //文字颜色
            		fontSize: 14, //文本大小
            		borderRadius: 2, //边框圆角
            		bgColor: '#00c16f', //背景颜色
            		display: 'ALWAYS', //常显
            		padding:5  //气泡窗口的内间距
            	},
            }]
        	},
          fail(res) {
            // console.log("失败了")
            console.log(res)
          }
        });
      },
      
      // 紧急呼叫
      async callSupport(phone){
        // console.log("拨打电话",this.servicePhone)
        uni.makePhoneCall({
          phoneNumber:phone.toString()//this.servicePhone是你要拨打的电话号码
        });
      },             
		},
    computed: {
    	scrollerHeight: function() {
    		const sysInfo = uni.getSystemInfoSync()
    		return (sysInfo.windowHeight) + 'rpx';
    	},
    },
	}
</script>

<style lang="scss" scoped>
  .content{
    .rescue-logo{
      // position: absolute;
      margin-left: 68rpx;
      margin-top: 48rpx;
      // top: 136rpx;
      image{
        width: 614rpx;
        height: 128rpx;
        opacity: 1;
      }
    }
    
    .forHelp-box{
      // position: absolute;
      martext-align: center;
      margin-left: 32rpx;
      margin-top: 24rpx;
      text-align: center;
      .forHelp-box-detail{
        width: 686rpx;
        height: 280rpx;
        opacity: 1;
        line-height: 280rpx;
        border-radius: 24rpx;
        background: rgba(230, 52, 52, 1);
        .detail-text{
          /** 文本1 */
          font-size: 24px;
          font-weight: 600;
          letter-spacing: 0px;
          color: rgba(255, 255, 255, 1);
          // text-align: left;
          vertical-align: top;
        }
      }
    }
    
    .clll-admin-box{
      // position: absolute;
     display: flex;
     justify-content: center;
     margin-top: 24rpx;
       .urgent-call-icon{
         width: 330rpx;
         height: 280rpx;
         opacity: 1;
         border-radius: 24rpx;
         background: rgba(252, 123, 36, 1);
         .text-datail{
           margin-left: 88rpx;
           margin-bottom: 56rpx;
           margin-left: 82rpx;
           margin-top: 46rpx;
           font-size: 40rpx;
           font-weight: 400;
           letter-spacing: 0px;
           line-height: 0px;
           color: rgba(255, 255, 255, 1);
           text-align: left;
           vertical-align: top;
         }
        image{
          margin-left: 126rpx;
          margin-top: 56rpx;
          margin-left: 124rpx;
          width: 80rpx;
          height: 80rpx;
          opacity: 1;
        }
     }
     .urgent-call-text{
       margin-left: 24rpx;
       width: 332rpx;
       height: 280rpx;
       opacity: 1;
       border-radius: 24rpx;
       background: rgba(50, 194, 124, 1);  
       .text-datail{
          margin-left: 88rpx;
          margin-bottom: 56rpx;
          margin-left: 82rpx;
          margin-top: 46rpx;
          font-size: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 0px;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;
        }
       image{
         margin-left: 126rpx;
         margin-top: 56rpx;
         margin-left: 126rpx;
         width: 80rpx;
         height: 80rpx;
         opacity: 1;
       }
     }
    }
    .phone-list{
      display: flex;
      flex-wrap: wrap;
      margin-left: 32rpx;
      margin-top: 48rpx;
      .phone-item-120{
        display: flex;
        // justify-content: center;
        width: 686rpx;
        height: 112rpx;
        opacity: 1;
        border-radius: 24rpx;
        background: rgba(189, 40, 40, 1);
        image{
          margin-top: 32rpx;
          margin-bottom: 32rpx;
          margin-left: 242rpx;
          height: 48rpx;
          width: 48rpx;
        }
        .call-phone{
          margin-left: 16rpx;
          margin-top: 30rpx;
          margin-bottom: 30rpx;
         font-size: 36rpx;
         font-weight: 600;
         letter-spacing: 0rpx;
         color: rgba(255, 255, 255, 1);
         text-align: left;
         vertical-align: top;
        }       
      }
      .phone-item-110{
        display: flex;
        // justify-content: center;
        width: 686rpx;
        height: 112rpx;
        opacity: 1;
        border-radius: 24rpx;
        margin-top: 24rpx;
        background: rgba(24, 43, 217, 1);
        image{
          margin-top: 32rpx;
          margin-bottom: 32rpx;
          margin-left: 242rpx;
          height: 48rpx;
          width: 48rpx;
        }
        .call-phone{
          margin-left: 16rpx;
          margin-top: 30rpx;
          margin-bottom: 30rpx;
         font-size: 36rpx;
         font-weight: 600;
         letter-spacing: 0rpx;
         color: rgba(255, 255, 255, 1);
         text-align: left;
         vertical-align: top;
        }
      }
      .phone-item-119{
        display: flex;
        // justify-content: center;
        width: 686rpx;
        height: 112rpx;
        opacity: 1;
        border-radius: 24rpx;
        margin-top: 24rpx;
        background: rgba(230, 107, 25, 1);
        image{
          margin-top: 32rpx;
          margin-bottom: 32rpx;
          margin-left: 242rpx;
          height: 48rpx;
          width: 48rpx;
        }
        .call-phone{
          margin-left: 16rpx;
          margin-top: 30rpx;
          margin-bottom: 30rpx;
         font-size: 36rpx;
         font-weight: 600;
         letter-spacing: 0rpx;
         color: rgba(255, 255, 255, 1);
         text-align: left;
         vertical-align: top;
        }
      }
    }
    
    .sub-nav {
    	martext-align: center;
    	// margin-left: 32rpx;
    	margin-top: 24rpx;
    	text-align: center;
    	.btn {
       margin-top: 64rpx ;
       width: 686rpx;
       height: 280rpx;
       opacity: 1;
       line-height: 280rpx;
       border-radius: 24rpx;
       background: rgba(230, 52, 52, 1);
       font-size: 24px;
       font-weight: 600;
       letter-spacing: 0px;
       color: rgba(255, 255, 255, 1);
       // text-align: left;
       vertical-align: top;
    	} 
    }
    
    position: relative;
    padding-bottom: 20%;
  }

</style>
